<template>
	<view class="container" :key="refreshKey">
		<view class="pointmall-t">
			<view class="pointmaill-l">
				<span>我的积分</span>
				<img src="/static/img/pointsMall/jf.png"/>
				<span>33</span>
			</view>
			<view class="pointmaill-r">
				
			</view>
		</view>
		<view class="goods-t">
			<view class="more-title">
				<view class="line"></view>
				积分兑换
			</view>
			<view class="goods" v-for="record in goodses">
				<view class="goods-line"></view>
				<view class="goods-info" @click="goodsDetailPage(record.id)">
					<view class="goods-info-l">
						<image :src="record.mainPic"></image>
						<div class="corner-tag">库存：{{record.stock}}</div>
					</view>
					<view class="goods-info-r">
						<view class="goods-name">
							{{record.goodsName}}
						</view>
						<view class="goods-jifen">
							<span>{{record.price}}</span>积分
						</view>
						<view class="price-stock">
							<view class="price">
								<button class="exchange-btn" @click="">去兑换</button> 
							</view>
						</view>
						<!-- <view class="goods-action">
							<uv-button type="primary" text="立即兑换" shape="circle" size="small" @click=""></uv-button>
						</view> -->
					</view>
				</view>
				<!-- <uv-gap height="8" bgColor="#e8e8e8"></uv-gap> -->
			</view>
	    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodses: [],
				refreshKey:0
			}
		},
		onLoad(option) {
			this.findAllGoods();
		},
		onShow(){
			this.refreshKey += 1;
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '../goodsExchangeRecord/goodsExchangeRecord'
			});
		},
		methods: {

			goodsDetailPage(id) {
				uni.navigateTo({
					url: '../goodsDetail/goodsDetail?id=' + id
				});
			},

			findAllGoods() {
				var that = this;
				uni.$uv.http.get('/goods/findAll').then(res => {
					that.goodses = res.data;
				});
			},

		}
	}
</script>

<style scoped lang="less">
page {
	height: auto !important;
	background-color: #2d3b85;
}
	.container{
		padding: 28rpx;
		box-sizing: border-box;
	}
	.goods-t{
		display: flex;
		justify-content:flex-start;
		flex-wrap: wrap;
		background-color: #FFF;
		border-radius:28rpx ;
		.more-title {
			font-size: 30rpx;
			display: flex;
			align-items: center;
            width: 100%;
			margin-top: 30rpx;
			margin-left: 20rpx;
			margin-bottom: 40rpx;
			.line {
				width: 6rpx;
				height: 28rpx;
				background-color:#2d3c87;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-right: 6rpx;
			}
		}
	}
	.goods {
		width: 50%;
		display: flex;
		justify-content: center;
	}
	.goods-info {
		display: flex;
		/* height: 184rpx; */
		border-radius: 28rpx;
		color: #000;
		flex-direction: column;
		border: 1px solid #d9d9d9;
		width: 90%;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.goods-info-l {
		width: 100%;
		height: 100%;
		position: relative;
		image{
			width: 100%;
			height: 350rpx;
			border-radius: 28rpx 28rpx 0 0;
		}
		.corner-tag {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: 8rpx 12rpx;
    font-size: 22rpx;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40rpx;
    min-height: 24rpx;
    text-align: center;
}
	}

	.goods-info-r {
		flex: 1;
		padding-top: 20rpx;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		text-align: center;
	}
	.goods-name {
		font-weight: 600;
		font-size: 30rpx;
		color: #000;
		line-height: 30rpx;
	}
	.goods-jifen{
		font-size: 24rpx;
	}
	.goods-jifen span{
		color: #f68250;
		font-weight: 600;
		margin-right: 10rpx;
		line-height: 60rpx;
		font-size: 35rpx;
	}

	.price-stock {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 20rpx;
	}

	.stock {
		font-weight: 400;
		font-size: 24rpx;
		color: #8A8C90;
		line-height: 24rpx;
	}

	.price {
		.exchange-btn{
			color: #FFF;
			font-weight: 400;
			font-size: 28rpx;
			width: 200rpx;
			height: 64rpx;
			line-height: 64rpx;
			background:#2d3b85;
		    border-radius: 38rpx;
			margin-top: 20rpx;
		}
	}
    .pointmall-t{
		display: flex;
		justify-content:space-around;
		align-items: center;
	}
	.pointmaill-l{
        width: 50%;
		color:#FFF;
		display: flex;
		justify-content: space-around;
		font-size: 32rpx;
		img{
           width: 36rpx;
		   height: 36rpx;
		}
	}
	.pointmaill-r{
		background: url(/static/img/pointsMall/pointmaill-r.png);
		height: 100px;
		width: 50%;
		background-size: 100% 100%;
	}
</style>